<template>
  <div class="inner-content">
    <el-tabs v-model="searchType" tab-position="left" style="flex-shrink: 0" @tab-click="handleClick">
      <el-tab-pane v-for="tab in typeTabs" :key="tab.value" :label="tab.label" :name="tab.label"></el-tab-pane>
    </el-tabs>
    <div style="flex: 1; overflow: auto">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm">
        <el-form-item v-if="searchType == '阿里短信'" label="阿里云密钥ID:" prop="aliyunKey">
          <el-input v-model="ruleForm.aliyunKey"></el-input>
        </el-form-item>
        <el-form-item v-if="searchType == '阿里短信'" label="阿里云密钥SECRET:" prop="aliyunSecret">
          <el-input v-model="ruleForm.aliyunSecret"></el-input>
        </el-form-item>
        <el-form-item v-if="searchType == '阿里短信'" label="阿里云短信端点:" prop="aliyunMessagePort">
          <el-input v-model="ruleForm.aliyunMessagePort"></el-input>
        </el-form-item>
        <el-form-item v-if="searchType == '阿里短信'" label="阿里云短信签名:" prop="aliyunMessageSign">
          <el-input v-model="ruleForm.aliyunMessageSign"></el-input>
        </el-form-item>
        <el-form-item v-if="searchType == '腾讯短信'" label="腾讯云密钥ID:" prop="tencentyunKey">
          <el-input v-model="ruleForm.tencentyunKey"></el-input>
        </el-form-item>
        <el-form-item v-if="searchType == '腾讯短信'" label="腾讯云密钥SECRET:" prop="tencentyunSecret">
          <el-input v-model="ruleForm.tencentyunSecret"></el-input>
        </el-form-item>
        <el-form-item v-if="searchType == '腾讯短信'" label="腾讯云短信端点:" prop="tencentyunMessagePort">
          <el-input v-model="ruleForm.tencentyunMessagePort"></el-input>
        </el-form-item>
        <el-form-item v-if="searchType == '腾讯短信'" label="腾讯云短信签名:" prop="tencentMessageSign">
          <el-input v-model="ruleForm.tencentMessageSign"></el-input>
        </el-form-item>
        <el-button size="small" type="primary" @click="submitForm('ruleForm')">保 存</el-button>
        <el-button size="small" @click="resetForm('ruleForm')">重 置</el-button>
        <!-- </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Message',
  components: {},
  props: {},
  data() {
    return {
      searchType: '阿里短信',
      typeTabs: [
        {
          value: '1',
          label: '阿里短信',
        },
        {
          value: '2',
          label: '腾讯短信',
        },
      ],
      ruleForm: {},
      rules: {},
    }
  },
  created() {},
  methods: {
    handleClick(tab, event) {
      this.searchType = tab.name
    },
  },
}
</script>

<style scoped lang="scss">
.inner-content {
  display: flex;
}
</style>
